@use "@/common/styles/colors"

.input-dialog
  display: flex
  flex-direction: column
  gap: 1.5rem
  width: 26rem
  user-select: none

  .dialog-title
    display: flex
    align-items: center
    gap: 1rem

    svg
      width: 2rem
      height: 2rem
      color: colors.$primary

    h2
      margin: 0
      font-size: 1.3rem

  .dialog-content
    display: flex
    flex-direction: column
    gap: 1.5rem

    .prompt-description
      color: colors.$light-gray
      font-size: 0.95rem
      line-height: 1.4
      padding: 1rem
      background-color: colors.$dark-gray
      border-radius: 0.5rem
      border-left: 3px solid colors.$primary

    .form-group
      display: flex
      flex-direction: column
      gap: 0.75rem

      label
        color: colors.$subtext
        font-weight: 600
        font-size: 0.9rem

      .options-container
        display: flex
        flex-direction: column
        gap: 0.5rem

      .confirm-actions
        display: flex
        gap: 1rem

        button:first-child
          flex: 1

        button:last-child
          flex: 1

  .dialog-actions
    display: flex
    justify-content: flex-end
    gap: 1rem
    margin-top: 0.5rem
    padding-top: 1rem
    border-top: 1px solid colors.$gray
